<template>
  <view class="detail-box">
    <view class="detail-top">
      <view class="icon-text" :class="{
          'outer-bg-blue': detail.topUpAndDeductType===0,
          'outer-bg-yellow': detail.topUpAndDeductType===1
        }">
        <view :class="{
            'inner-bg-blue': detail.topUpAndDeductType===0,
            'inner-bg-yellow': detail.topUpAndDeductType===1
          }">
          {{ typeMap[detail.topUpAndDeductType] || '' }}
        </view>
      </view>
      <view class="title">{{ detail.customerName || '' }}</view>
      <view class="amount">{{amountSymbol(detail.topUpAndDeductType)}}{{ detail.amount || 0.00 }}</view>
      <view class="account-type">{{ accountTypeText(detail.accountType) }}</view>
    </view>
    <view class="detail-bottom">
      <view>
        <view>交易类型</view>
        <view>{{ detail.topUpAndDeductTypeText }}</view>
      </view>
      <view>
        <view>交易前余额</view>
        <view>{{ detail.preTradeBalance }}</view>
      </view>
      <view>
        <view>交易金额</view>
        <view>{{ detail.amount }}</view>
      </view>
      <view>
        <view>交易后余额</view>
        <view>{{ detail.postTradeBalance }}</view>
      </view>
      <view>
        <view>交易时间</view>
        <view>{{ detail.tradingTime }}</view>
      </view>
    </view>
  </view>
</template>
<script>
  import { getDictDatas } from '@/api/me.js';
  import { getTransactionRecordDetails } from "@/api/customerAccount"
  export default {
    data() {
      return {
        queryParams: {
          accountType: '',
          customerName: '',
          transactionRecordId: ''
        },
        typeMap: {
          0: '充',
          1: '扣'
        },
        detail: {},
        tradeTypeList: [],
        accountTypeList: []
      };
    },
    computed: {
      iconBlue() {
        return (type) => {
          return (
            [1, 4].includes(type) &&
            this.$store.state.user.curTypeColor === '#409EFE'
          );
        };
      },
      accountTypeText() {
        return (value) => {
          const accountType = this.accountTypeList.find(e => e.value == value)
          return accountType?.label || ''
        }
      },
      amountSymbol() {
        return (value) => {
          if (value === 0) {
            return '+'
          }
          if (value === 1) {
            return '-'
          }
          return ''
        }
      }
    },
    async onLoad(option) {
      this.queryParams.accountType = option.accountType
      this.queryParams.customerName = option.customerName
      this.queryParams.transactionRecordId = option.transactionRecordId
      await this.getDictDatas();
      this.getDetailByIdFn();
    },
    methods: {
      async getDictDatas() {
        const res = await getDictDatas();
        if (res.code === 0) {
          const result = res?.data || []
          this.tradeTypeList = result.filter(
            (e) => e.dictType === 'top_up_and_deduct'
          );
          this.accountTypeList = result.filter(
            (e) => e.dictType === 'account_type'
          );
        }
      },
      async getDetailByIdFn() {
        const res = await getTransactionRecordDetails(this.queryParams);
        if (res.code === '200') {
          const result = res.data || {};
          result.topUpAndDeductTypeText = this.tradeTypeList.find(
            (e) => e.value == result.topUpAndDeductType
          )?.label;
          this.detail = result;
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .outer-bg-red {
    background-color: #ffa59c;
  }

  .inner-bg-red {
    background-color: #d32d2d;
  }

  .outer-bg-blue {
    background-color: #c5e2ff;
  }

  .inner-bg-blue {
    background-color: #49a4ff;
  }

  .outer-bg-yellow {
    background-color: #ffe8aa;
  }

  .inner-bg-yellow {
    background-color: #ffd155;
  }

  .detail-box {
    margin: 26.67rpx;
    padding: 35.56rpx 26.67rpx;
    background-color: #ffffff;
  }

  .icon-text {
    margin: auto;
    width: 117.33rpx;
    height: 117.33rpx;
    padding: 8rpx;
    color: #ffffff;
    border: 3.56rpx solid;
    border-radius: 60.44rpx;

    >view {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      font-size: 53.33rpx;
      border-radius: 50%;
    }
  }

  .detail-top {
    text-align: center;
    border-bottom: 1px dotted #c2c2c2;

    .title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333333;
      line-height: 50rpx;
      margin-top: 17.78rpx;
    }

    .amount {
      font-size: 56.89rpx;
      font-weight: 700;
      line-height: 60rpx;
    }

    .account-type {
      font-size: 15px;
      color: #333333;
      margin-bottom: 40px;
    }
  }

  .detail-bottom {
    font-size: 26.67rpx;
    padding-top: 53.33rpx;

    >view+view {
      margin-top: 17.78rpx;
    }

    >view {
      display: flex;
      justify-content: space-between;

      >view:first-child {
        color: #999999;
      }
    }
  }
</style>